<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0 auto;
            padding: 0 auto;
        }
        div{
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <canvas width="600" height="600" id="can">您的浏览器版本太低，不支持画布，请升级您的浏览器</canvas>
    </div>
    <script type="text/javascript">
        var box=document.getElementById("can");
        var pen=box.getContext("2d");
        pen.beginPath();
        pen.strokeStyle="yellow";
        pen.arc(300,300,200,Math.PI*2,false);
        pen.fillStyle="yellow";
        pen.fill();
        pen.closePath();
        pen.stroke();
        pen.beginPath();
        pen.strokeStyle="black";
        pen.lineWidth="5";
        pen.moveTo(180,240);
        pen.quadraticCurveTo(220,200,260,240);
        pen.stroke();
        pen.beginPath();
        pen.strokeStyle="black";
        pen.moveTo(340,240);
        pen.quadraticCurveTo(380,200,420,240);
        pen.stroke();
//        pen.beginPath();
//        pen.strokeStyle="red";
//        pen.arc(220,270,30,Math.PI*2,false);
//        pen.fillStyle="red";
//        pen.fill();
//        pen.closePath();
//        pen.stroke();
        function huabu(){
            var box=document.getElementById("can");
            var pen=box.getContext("2d");
            for(var i=3;i<=3;i-=0.5) {
                var a = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                var c = Math.floor(Math.random() * 256);
                pen.beginPath();
                pen.strokeStyle = "red";
                pen.arc(220, 270, i * 10, 0, Math.PI * 2, true);
                pen.fillStyle = "rgb(" + a + "," + b + "," + c + ")";
                pen.fill();
                pen.closePath();
                pen.stroke();
            }
        }
        window.setInterval(huabu,30);
//        pen.beginPath();
//        pen.strokeStyle="blue";
//        pen.arc(380,270,30,Math.PI*2,false);
//        pen.fillStyle="blue";
//        pen.fill();
//        pen.closePath();
//        pen.stroke();
        function huabu1(){
            var box=document.getElementById("can");
            var pen=box.getContext("2d");
            for(var i=3;i<=3;i-=0.5) {
                var a = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                var c = Math.floor(Math.random() * 256);
                pen.beginPath();
                pen.strokeStyle = "red";
                pen.arc(380, 270, i * 10, 0, Math.PI * 2, true);
                pen.fillStyle = "rgb(" + a + "," + b + "," + c + ")";
                pen.fill();
                pen.closePath();

                pen.stroke();
            }
        }
        window.setInterval(huabu1,30);
        pen.beginPath();
        pen.moveTo(285,335);
        pen.lineTo(300,307);
        pen.lineTo(315,335);
        pen.strokeStyle="orange";
        pen.lineWidth="15";
        pen.fillStyle="orange";
        pen.fill();
        pen.closePath();
        pen.stroke();
        pen.beginPath();
        pen.strokeStyle="black";
        pen.lineWidth="2";
        pen.moveTo(220,380);
        pen.quadraticCurveTo(300,450,380,380);
        pen.stroke();
        pen.beginPath();
        pen.moveTo(300,10);
        pen.bezierCurveTo(240,31,360,76,300,100);
        pen.moveTo(280,10);
        pen.bezierCurveTo(220,31,340,76,280,100);
        pen.moveTo(320,10);
        pen.bezierCurveTo(260,31,380,76,320,100);
        pen.stroke();
    </script>
</body>
</html>